<template>

	<div>
		<el-row>
			<el-col :span="12">
				<el-select v-model="searchParams.typeId" placeholder="状态">
					<el-option
							v-for="item in options"
							:key="item.tradeid"
							:label="item.tradename"
							:value="item.tradeid">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="12">
				<span>按时间搜索</span>
				<el-date-picker
						v-model="searchParams.DateTime"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期">
				</el-date-picker>
				<el-button type="primary" @click="getTradecordeList">搜索</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-table
					:data="tableData"
					style="width: 100%">
				<el-table-column
						prop="recordtime"
						label="时间"
						width="180">
				</el-table-column>
				<el-table-column
						prop="recordno"
						label="交易号"
						width="180">
				</el-table-column>
				<el-table-column
						prop="tradetype.tradename"
						label="类型">
				</el-table-column>
				<el-table-column
						prop="recordmoney"
						label="金额">
				</el-table-column>
				<el-table-column
						prop="recordremark"
						label="备注">
				</el-table-column>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="pageInfo.currentPage"
					:page-sizes="[2, 4, 6, 8]"
					:page-size="pageInfo.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageInfo.total">
			</el-pagination>
		</el-row>
	</div>

</template>

<style>

	.highlighted .addr {
		color: #ddd;
	}

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>

  export default {
    methods: {
		loadAll() {
			return []
		},
		handleSizeChange(val) {
			this.pageInfo.pageSize = val;
			this.getTradecordeList();
			// console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
			this.pageInfo.currentPage = val;
			this.getTradecordeList();
			// console.log(`当前页: ${val}`);
		},
		//获取记录列表数据
		getTradecordeList(){
			let typeId = this.searchParams.typeId;
			let startTime = this.searchParams.DateTime[0].toISOString();
			let endTime = this.searchParams.DateTime[1].toISOString();
			let searchePageInfo = {...this.pageInfo,typeId,startTime,endTime};
			// console.log(searchePageInfo);
			this.$axios.get('/tradecorde',{params:searchePageInfo}).then(res=>{
				// console.log(res);
				this.pageInfo.total = res.total;
				this.tableData = res.records;

			})
		}
    },
    data() {
      return {
		  restaurants: [],
		  state: '',
		  tableData: [],//表格数据
		  options: [], //选项数据
		  searchParams:{
		  	typeId: 1 ,
			DateTime:[new Date(2024, 0, 2, 10, 10),
				new Date(2024, 0, 10, 10, 10),
			]
		  },
		  pageInfo:{
			  currentPage:1,
			  pageSize: 2,
			  total:100
		  },
	  }
    },
	created() {
    	//获取类型列表
		this.$axios.get('/tradetype').then(res=>{
			// console.log(res);
			this.options = res;
		});

	},
	  mounted() {
		  // this.restaurants = this.loadAll();
		  this.getTradecordeList();
	  }
  }
</script>
